<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>

<HEAD>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
	<META NAME="GENERATOR" Content="Visual Page 1.1a for Windows">
	<TITLE>untitled</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<P><FONT SIZE="4" FACE="Tahoma"><B>Method</B></FONT></P>
<P><FONT SIZE="2" FACE="Tahoma">Our method for using HTML in early UI mocking up consists of 4 steps. At each
step the mockup consists of an HTML page that can be viewed in an HTML editor or web browser.</FONT></P>
<P>
<HR ALIGN="CENTER">
</P>
<P><FONT SIZE="2" FACE="Tahoma"><B>Step 1</B>: Address Issues of Provided Functionality and Content</FONT>

<UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Make a rough outline of functions provided by the system.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Group related functions together.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Identify classes of users.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Make initial assumptions about available resources: I/O hardware, events, and
	conditions.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">HTML constructs used:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">A single page of indented text, unformated.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Optional: Links into requirements documents.</FONT>
	</UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Evaluation:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Do you cover all functions needed for common user tasks?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Are there critical tasks that you have not considered?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Are the available resources sufficient?</FONT>
	</UL>
</UL>

<P>
<HR ALIGN="CENTER">
</P>
<P><FONT SIZE="2" FACE="Tahoma"><B>Step 2</B>: Break Content into Screens</FONT>

<UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Use HTML horizontal rules to break content into screens. Start with one screen
	per major function.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Add additional transition and confirmation screens as needed.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Define logical user interface events that should be detected on each screen.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">HTML constructs used:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Horizontal rules.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Anchors defined for each screen.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Bracketed terms label events. (e.g., [CashRemoved] or [TimeOut])</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Optional: Links into discussion of tradeoffs and open issues.</FONT>
	</UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Evaluation:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Are there too many screens?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Are individual screens too complex?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Can needed events be detected? (e.g., an ATM knows when you remove your cash)</FONT>
	</UL>
</UL>

<P>
<HR ALIGN="CENTER">
</P>
<P><FONT SIZE="2" FACE="Tahoma"><B>Step 3</B>: Address Issues of Screen Flow</FONT>

<UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Define links between events and resulting screens.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">&quot;Run&quot; the mockup in any web browser.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Move content among screens to improve screen flow.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">HTML constructs used:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Local links.</FONT>
	</UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Evaluation:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Is the length of a typical session too long?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Are there too many steps needed for common tasks? (e.g., withdraw $40)</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Is navigation straightforward? Are provided navigational aids sufficient?</FONT>
	</UL>
</UL>

<P>
<HR ALIGN="CENTER">
</P>
<P><FONT SIZE="2" FACE="Tahoma"><B>Step 4</B>: Address Issues of Presentation</FONT>

<UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Format screens to roughly look like finished product.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Bind some logical events to physical buttons.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">HTML constructs used:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Tables with fixed sizes.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Optional: Use images to increase fidelity of key screens.</FONT>
	</UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Evaluation:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Is there enough space to show all information on a given screen?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Is the rough layout of each screen clear? Consistent?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Are key screen elements easy to find?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Are messages phrased clearly? Appropriate for context?</FONT>
	</UL>
</UL>

<P></P>

<P>
<HR ALIGN="CENTER">
<FONT SIZE="2" FACE="Tahoma"><B></B></FONT></P>

<P><FONT SIZE="2" FACE="Tahoma"><B>Step 5</B>: Gather Metrics and Feedback from More Evaluators</FONT></P>

<UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Break screens into separate HTML pages.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Visualize overall UI structure using web site mapping tools.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Add hit counters to pages or use other monitoring techniques.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Use email links or HTML forms to gather feedback from evaluators.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Invite a wide range of people to evaluate the mockup.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">HTML contructs used:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Multiple HTML pages.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Hit counters.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">email links.</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Optional: HTML forms.</FONT>
	</UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Evaluation:</FONT>
	<UL>
		<LI><FONT SIZE="2" FACE="Tahoma">Does the site map reveal sequences that are too long? dead ends? parallel structures?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Which pages get the most traffic?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">Which pages get the least traffic?  Which are never used?</FONT>
		<LI><FONT SIZE="2" FACE="Tahoma">What are do the evaluators have to say?</FONT>
	</UL>
</UL>

<P></P>

<P>
<HR ALIGN="CENTER">
<FONT SIZE="2" FACE="Tahoma"><B></B></FONT></P>

<P><FONT SIZE="2" FACE="Tahoma"><B>At any step</B>: Make use of HTML and the web</FONT></P>

<UL>
	<LI><FONT SIZE="2" FACE="Tahoma">Placing UI mockups on web pages allows people other than the author to access
	and evaluate them more easily.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Use text to annotate the mockup.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Use links to connect key parts of the mockup to requirements or discussion
	of open issues.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Place the page on a web site (internet or intranet) to make it more accessible
	to evaluators.</FONT>
	<LI><FONT SIZE="2" FACE="Tahoma">Add email links to direct feedback from users to the author.</FONT>
</UL>

<P>
<P><FONT SIZE="2" FACE="Tahoma"><BR>
<BR>
</FONT>

</BODY>

</HTML>